<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中标通知书</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .page-title {
            font-size: 18px;
            font-weight: bold;
        }
        .search-box {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .search-input {
            width: 300px;
            margin-right: 10px;
        }
        .table th {
            background-color: #f8f9fa;
            text-align: center;
        }
        .table td {
            text-align: center;
            vertical-align: middle;
        }
        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            color: white;
            font-size: 12px;
        }
        .status-published {
            background-color: #28a745;
        }
        .status-draft {
            background-color: #17a2b8;
        }
        .pagination-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        .modal-dialog.modal-xl {
            max-width: 90%;
        }
        .required-field::before {
            content: "*";
            color: red;
            margin-right: 4px;
        }
        .modal-footer .btn-submit {
            margin-right: 10px;
        }
        .confirm-dialog {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            z-index: 1050;
        }
        .confirm-dialog-header {
            padding: 15px;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .confirm-dialog-title {
            font-size: 16px;
            font-weight: bold;
        }
        .confirm-dialog-body {
            padding: 20px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .confirm-dialog-body i {
            font-size: 40px;
            color: #0d6e6e;
            margin-right: 15px;
        }
        .confirm-dialog-footer {
            padding: 15px;
            text-align: center;
            border-top: 1px solid #dee2e6;
        }
        .confirm-dialog-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1040;
        }
        .attachment-area {
            border: 1px dashed #ccc;
            padding: 15px;
            margin-top: 10px;
        }
        .attachment-plus {
            width: 80px;
            height: 80px;
            border: 1px dashed #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .attachment-plus i {
            font-size: 24px;
            color: #6c757d;
        }
        /* 打印样式 */
        @media print {
            body * {
                visibility: hidden;
            }
            #viewBidNoticeModal, #viewBidNoticeModal * {
                visibility: visible;
            }
            #viewBidNoticeModal {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }
            .modal-footer, .close {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="header">
            <div class="page-title">中标通知书</div>
            <div class="actions">
                <button class="btn btn-primary" id="addNewBtn">
                    <i class="fas fa-plus"></i> 新建
                </button>
                <button class="btn btn-danger" id="deleteBtn" disabled>
                    <i class="fas fa-trash"></i> 删除
                </button>
                <button class="btn btn-warning" id="editBtn" disabled>
                    <i class="fas fa-edit"></i> 编辑
                </button>
                <button class="btn btn-success" onclick="exportExcel()">
                    <i class="fas fa-download"></i> 导出Excel
                </button>
            </div>
        </div>

        <div class="search-box">
            <input type="text" class="form-control search-input" placeholder="输入项目名称/申报单位/中标单位">
            <button class="btn btn-primary">
                <i class="fas fa-search"></i> 搜索
            </button>
        </div>

        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th width="5%">
                            <input type="checkbox" id="selectAll">
                        </th>
                        <th width="5%">NO</th>
                        <th width="20%">项目名称</th>
                        <th width="15%">申报单位</th>
                        <th width="10%">中标单位</th>
                        <th width="10%">截止日期</th>
                        <th width="10%">中标价</th>
                        <th width="10%">创建人</th>
                        <th width="10%">创建日期</th>
                        <th width="10%">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox" class="row-checkbox"></td>
                        <td>1</td>
                        <td>福州市医院信息化建设</td>
                        <td>福州市卫健委</td>
                        <td>A公司</td>
                        <td>2024-12-31</td>
                        <td>1,743,000,000.00</td>
                        <td>张三</td>
                        <td>2024-12-27</td>
                        <td>
                            <button class="btn btn-sm btn-info view-btn">查看</button>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="row-checkbox"></td>
                        <td>2</td>
                        <td>某区智能交通系统</td>
                        <td>某区交通局</td>
                        <td>B公司</td>
                        <td>2024-12-29</td>
                        <td>5,460,000.00</td>
                        <td>李四</td>
                        <td>2024-12-27</td>
                        <td>
                            <button class="btn btn-sm btn-info view-btn">查看</button>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="row-checkbox"></td>
                        <td>3</td>
                        <td>市级网络安全升级</td>
                        <td>市政府信息中心</td>
                        <td>C公司</td>
                        <td>2024-12-28</td>
                        <td>1,723,000,000.00</td>
                        <td>王五</td>
                        <td>2024-12-27</td>
                        <td>
                            <button class="btn btn-sm btn-info view-btn">查看</button>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="row-checkbox"></td>
                        <td>4</td>
                        <td>某区教育信息化平台</td>
                        <td>区教育局</td>
                        <td>D公司</td>
                        <td>2018-04-23</td>
                        <td>1,723,000,000.00</td>
                        <td>赵六</td>
                        <td>2024-04-23</td>
                        <td>
                            <button class="btn btn-sm btn-info view-btn">查看</button>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="row-checkbox"></td>
                        <td>5</td>
                        <td>智慧园区综合系统</td>
                        <td>科技园区管委会</td>
                        <td>E公司</td>
                        <td>2022-03-08</td>
                        <td>1,272,000,000.00</td>
                        <td>钱七</td>
                        <td>2024-03-26</td>
                        <td>
                            <button class="btn btn-sm btn-info view-btn">查看</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="pagination-info">
            <div>
                共 <span id="totalPages">2</span> 页，<span id="totalItems">9</span> 条记录
            </div>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <!-- 中标通知书新建/编辑模态框 -->
    <div class="modal fade" id="bidNoticeModal" tabindex="-1" aria-labelledby="bidNoticeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bidNoticeModalLabel">中标通知书</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="bidNoticeForm">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="required-field">项目名称</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="projectName" required>
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button">
                                            <i class="fas fa-times"></i>
                                        </button>
                                        <button class="btn btn-outline-secondary" type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="required-field">申报单位</label>
                                <input type="text" class="form-control" id="applyUnit" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="required-field">中标单位</label>
                                <input type="text" class="form-control" id="bidWinner" required>
                            </div>
                            <div class="col-md-6">
                                <label>建设规模</label>
                                <input type="text" class="form-control" id="constructionScale">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>中标价</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="bidPrice">
                                    <div class="input-group-append">
                                        <span class="input-group-text">元</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="required-field">截止日期</label>
                                <input type="date" class="form-control" id="deadlineDate" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>创建人</label>
                                <input type="text" class="form-control" id="creator" readonly>
                            </div>
                            <div class="col-md-6">
                                <label>创建日期</label>
                                <input type="date" class="form-control" id="createDate" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th width="50%">项目负责人</th>
                                            <th width="50%">联系方式</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <input type="text" class="form-control" id="projectManager">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" id="contactInfo">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label>中标范围</label>
                                <textarea class="form-control" id="bidScope" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label>备注</label>
                                <textarea class="form-control" id="remarks" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <label>附件</label>
                                <div class="d-flex justify-content-between">
                                    <div class="attachment-area flex-grow-1">
                                        <div class="d-flex">
                                            <div class="attachment-plus">
                                                <i class="fas fa-plus"></i>
                                            </div>
                                            <button type="button" class="btn btn-outline-primary ml-auto align-self-start" id="downloadAttachment">
                                                <i class="fas fa-download"></i> 批量下载
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-submit" id="submitBtn">提交</button>
                    <button type="button" class="btn btn-success" id="saveBtn">保存</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 确认删除对话框 -->
    <div class="confirm-dialog" id="confirmDeleteDialog" style="display: none;">
        <div class="confirm-dialog-header">
            <div class="confirm-dialog-title">确认对话框</div>
            <button type="button" class="close" id="closeConfirmBtn">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="confirm-dialog-body">
            <i class="fas fa-question-circle"></i>
            <span>确定要删除吗</span>
        </div>
        <div class="confirm-dialog-footer">
            <button type="button" class="btn btn-outline-success" id="confirmYesBtn">确定</button>
            <button type="button" class="btn btn-outline-secondary" id="confirmNoBtn">取消</button>
        </div>
    </div>
    <div class="confirm-dialog-backdrop" id="confirmDialogBackdrop" style="display: none;"></div>

    <!-- 中标通知书详情查看模态框 -->
    <div class="modal fade" id="viewBidNoticeModal" tabindex="-1" aria-labelledby="viewBidNoticeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewBidNoticeModalLabel">中标通知</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <h3>中标通知</h3>
                    </div>
                    <div class="border mb-4">
                        <div class="p-2 bg-light text-center font-weight-bold">
                            基本信息
                        </div>
                        <table class="table table-bordered mb-0">
                            <tbody>
                                <tr>
                                    <td width="15%" class="bg-light">项目名称</td>
                                    <td width="35%" id="view-projectName"></td>
                                    <td width="15%" class="bg-light">申报单位</td>
                                    <td width="35%" id="view-applyUnit"></td>
                                </tr>
                                <tr>
                                    <td class="bg-light">中标单位</td>
                                    <td id="view-bidWinner"></td>
                                    <td class="bg-light">建设规模</td>
                                    <td id="view-constructionScale"></td>
                                </tr>
                                <tr>
                                    <td class="bg-light">中标价</td>
                                    <td id="view-bidPrice"></td>
                                    <td class="bg-light">截止日期</td>
                                    <td id="view-deadlineDate"></td>
                                </tr>
                                <tr>
                                    <td class="bg-light">项目负责人</td>
                                    <td id="view-projectManager"></td>
                                    <td class="bg-light">联系方式</td>
                                    <td id="view-contactInfo"></td>
                                </tr>
                                <tr>
                                    <td class="bg-light">中标范围</td>
                                    <td colspan="3" id="view-bidScope" style="min-height: 120px; white-space: pre-line;"></td>
                                </tr>
                                <tr>
                                    <td class="bg-light">备注</td>
                                    <td colspan="3" id="view-remarks" style="min-height: 80px; white-space: pre-line;"></td>
                                </tr>
                                <tr>
                                    <td class="bg-light">附件</td>
                                    <td colspan="3" id="view-attachments" style="min-height: 150px;">
                                        <div class="text-center text-danger py-5">
                                            <h5>盖章版中标通知书</h5>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-between">
                        <div>
                            <span class="font-weight-bold">创建人：</span>
                            <span id="view-creator"></span>
                        </div>
                        <div>
                            <span class="font-weight-bold">创建日期：</span>
                            <span id="view-createDate"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="printBtn">
                        <i class="fas fa-print"></i> 打印
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.16.9/dist/xlsx.full.min.js"></script>
    <script>
        $(document).ready(function() {
            // 新建按钮点击事件
            $('#addNewBtn').click(function() {
                // 清空表单
                $('#bidNoticeForm')[0].reset();
                
                // 设置默认值
                $('#creator').val('当前用户');
                $('#createDate').val(formatDate(new Date()));
                
                // 打开模态框
                $('#bidNoticeModal').modal('show');
            });
            
            // 表格行中查看按钮点击事件
            $('.view-btn').click(function() {
                const row = $(this).closest('tr');
                const cells = row.find('td');
                
                // 填充查看模态框数据
                $('#view-projectName').text(cells.eq(2).text());
                $('#view-applyUnit').text(cells.eq(3).text());
                $('#view-bidWinner').text(cells.eq(4).text());
                $('#view-deadlineDate').text(cells.eq(5).text());
                $('#view-bidPrice').text(cells.eq(6).text());
                $('#view-creator').text(cells.eq(7).text());
                $('#view-createDate').text(cells.eq(8).text());
                
                // 填充其他数据（模拟数据）
                $('#view-constructionScale').text('总计1276万平方米，工程中包含公共建筑、集中开放的绿色区域、共计64个室等部分区域');
                $('#view-projectManager').text('项目负责人姓名');
                $('#view-contactInfo').text('13800138000');
                $('#view-bidScope').text('项目包括12.76万平方米工程中包含公共建筑、集中开放的绿色区域、共计64个室等部分区域，采用1500MW高温气冷堆核电装置，总装机容量为600MW，120MWh储能，项目涉及环保要求、数字化管理、过程科学系统等。通过科学高效工程性能进行主控指标高精度生成。');
                $('#view-remarks').text('经专家评定以后，择优选择。');
                
                // 打开查看模态框
                $('#viewBidNoticeModal').modal('show');
            });
            
            // 保存按钮点击事件
            $('#saveBtn').click(function() {
                // 验证表单
                if(!validateForm()) {
                    return;
                }
                
                // 执行保存操作（这里仅模拟）
                alert('保存成功，供应商不会在中标通知书控制台看到');
                $('#bidNoticeModal').modal('hide');
            });
            
            // 提交按钮点击事件
            $('#submitBtn').click(function() {
                // 验证表单
                if(!validateForm()) {
                    return;
                }
                
                // 执行提交操作（这里仅模拟）
                alert('提交成功，供应商已可在中标通知书控制台看到');
                $('#bidNoticeModal').modal('hide');
            });
            
            // 全选复选框点击事件
            $('#selectAll').change(function() {
                // 所有行复选框状态与全选框同步
                $('.row-checkbox').prop('checked', $(this).prop('checked'));
                // 更新按钮状态
                updateButtonStatus();
            });
            
            // 行复选框点击事件
            $(document).on('change', '.row-checkbox', function() {
                // 检查是否所有行都被选中
                const allChecked = $('.row-checkbox:checked').length === $('.row-checkbox').length;
                $('#selectAll').prop('checked', allChecked);
                // 更新按钮状态
                updateButtonStatus();
            });
            
            // 更新删除和编辑按钮状态
            function updateButtonStatus() {
                const checkedCount = $('.row-checkbox:checked').length;
                // 有选中行时启用删除按钮
                $('#deleteBtn').prop('disabled', checkedCount === 0);
                // 只有选中一行时才启用编辑按钮
                $('#editBtn').prop('disabled', checkedCount !== 1);
            }
            
            // 删除按钮点击事件
            $('#deleteBtn').click(function() {
                showDeleteConfirmDialog();
            });
            
            // 编辑按钮点击事件
            $('#editBtn').click(function() {
                // 获取选中的行
                const selectedRow = $('.row-checkbox:checked').closest('tr');
                if (selectedRow.length === 1) {
                    const cells = selectedRow.find('td');
                    
                    // 填充表单数据
                    $('#projectName').val(cells.eq(2).text());
                    $('#applyUnit').val(cells.eq(3).text());
                    $('#bidWinner').val(cells.eq(4).text());
                    $('#deadlineDate').val(formatDateForInput(cells.eq(5).text()));
                    $('#bidPrice').val(parseFloat(cells.eq(6).text().replace(/,/g, '')));
                    $('#creator').val(cells.eq(7).text());
                    $('#createDate').val(formatDateForInput(cells.eq(8).text()));
                    
                    // 打开模态框
                    $('#bidNoticeModal').modal('show');
                }
            });
            
            // 表格行点击事件 - 选中复选框
            $('table tbody tr').click(function(e) {
                // 如果点击的是按钮或复选框，不执行行点击事件
                if($(e.target).is('button') || $(e.target).is('i') || $(e.target).is('input')) {
                    return;
                }
                
                // 切换当前行的复选框状态
                const checkbox = $(this).find('.row-checkbox');
                checkbox.prop('checked', !checkbox.prop('checked'));
                checkbox.trigger('change');
            });
            
            // 关闭确认对话框
            $('#closeConfirmBtn, #confirmNoBtn, #confirmDialogBackdrop').click(function() {
                hideDeleteConfirmDialog();
            });
            
            // 确认删除
            $('#confirmYesBtn').click(function() {
                // 获取所有选中的行
                const selectedRows = $('.row-checkbox:checked').closest('tr');
                if(selectedRows.length > 0) {
                    // 执行删除操作（这里仅移除DOM元素作为演示）
                    selectedRows.remove();
                    
                    // 更新记录数和按钮状态
                    updatePagination();
                    updateButtonStatus();
                    
                    // 更新全选框状态
                    $('#selectAll').prop('checked', false);
                }
                
                // 隐藏确认对话框
                hideDeleteConfirmDialog();
            });
            
            // 初始化时更新按钮状态
            updateButtonStatus();
            
            // 打印功能
            $('#printBtn').click(function() {
                window.print();
            });
        });
        
        // 显示删除确认对话框
        function showDeleteConfirmDialog() {
            $('#confirmDeleteDialog, #confirmDialogBackdrop').show();
        }
        
        // 隐藏删除确认对话框
        function hideDeleteConfirmDialog() {
            $('#confirmDeleteDialog, #confirmDialogBackdrop').hide();
        }
        
        // 验证表单
        function validateForm() {
            // 获取必填字段
            const projectName = $('#projectName').val();
            const applyUnit = $('#applyUnit').val();
            const bidWinner = $('#bidWinner').val();
            const deadlineDate = $('#deadlineDate').val();
            
            // 验证必填字段
            if(!projectName || !applyUnit || !bidWinner || !deadlineDate) {
                alert('请填写所有必填字段');
                return false;
            }
            
            return true;
        }
        
        // 更新分页信息
        function updatePagination() {
            const totalItems = $('table tbody tr').length;
            $('#totalItems').text(totalItems);
        }
        
        // 格式化日期为YYYY-MM-DD
        function formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        
        // 将显示格式的日期转换为输入框格式
        function formatDateForInput(dateString) {
            const parts = dateString.split('-');
            if(parts.length === 3) {
                return `${parts[0]}-${parts[1].padStart(2, '0')}-${parts[2].padStart(2, '0')}`;
            }
            return '';
        }
        
        // 导出Excel功能
        function exportExcel() {
            // 创建工作簿
            const wb = XLSX.utils.book_new();
            
            // 表头
            const headers = ['序号', '项目名称', '申报单位', '中标单位', '截止日期', '中标价', '创建人', '创建日期'];
            
            // 数据
            const data = [headers];
            
            // 获取表格数据
            $('table tbody tr').each(function() {
                const rowData = [];
                $(this).find('td').each(function(index) {
                    // 不包括复选框列和"操作"列
                    if(index > 0 && index < 9) {
                        rowData.push($(this).text());
                    }
                });
                data.push(rowData);
            });
            
            // 创建工作表
            const ws = XLSX.utils.aoa_to_sheet(data);
            
            // 添加到工作簿
            XLSX.utils.book_append_sheet(wb, ws, '中标通知书');
            
            // 导出Excel文件
            XLSX.writeFile(wb, '中标通知书列表.xlsx');
        }
    </script>
</body>
</html>
